  .menu-icon-wrapper {
      display: inline-block;
      cursor: pointer;
  }
  .menu-icon-first, .menu-icon-second, .menu-icon-thrid {
      width: 25px;
      height: 2px;
      background-color: #fff;
      margin: 7px 0;
      transition: 0.4s;
      border-radius: 3px;
  }
  /* 旋转第一条横线 */
  .close .menu-icon-first {
      -webkit-transform: rotate(-45deg) translate(-5px, 8px);
      transform: rotate(-45deg) translate(-5px, 8px);
  }

  /* 隐藏第二条横线 */
  .close .menu-icon-second {
      opacity: 0;
  }

  /* 旋转第三条横线 */
  .close .menu-icon-thrid {
      -webkit-transform: rotate(45deg) translate(-5px, -8px);
      transform: rotate(45deg) translate(-5px, -8px);
  }